import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
// store是存储的意思在这里可以理解为实例化了一个vuex的仓库

import vuexPersist from "vuex-persist";

export default new Vuex.Store({
  state: {
    msg: "vuex里的公共数据msg",
    list: [],
  },
  // 状态，就是数据的意思，就相当于是data，存放的是公共的数据
  mutations: {
    fun1(state) {
      state.msg = "vuex是状态管理工具";
    },
    add(state, obj) {
      state.list.push({ name: obj.name, age: obj.age });
    },
    del(state, i) {
      state.list.splice(i, 1);
    },
    setlist(state, list) {
      if (localStorage.getItem("vuex")) {
        state.list = JSON.parse(localStorage.getItem("vuex")).list;
      } else {
        state.list = list;
      }

      // state.list=list
    },
    //每次刷新都会调用这个方法,都会给list赋值，如果我们要使数据保持刷新不掉，就要从本地存储中拿数据
    // 我们用的是持久化插件，会把state存在本地存贮中 存的是叫vuex的一个对象
  },
  //改变状态的方法，vuex中的state必须要用mutation操作（增删改查都叫操作）
  // state只能由mutation操作
  // 调用是this.$store.commit("fun1")

  actions: {},
  //放异步操作的地方，在vuex中请求ajax就在action中放
  modules: {},
  //分模块保存数据
  getters: {
    vuexages(state) {
      let age = 0;
      state.list.forEach((item) => {
        age += item.age;
      });
      return age;
    },
  },
  //相当于是计算属性computed，只不过是 组件里的计算属性只能在当前组件使用，但是getters可以在任何组件使用，第一个参数state代表状态
  //使用this.$store.getters.xx

  plugins: [
    new vuexPersist({
      localstorage: window.localStorage,
    }).plugin,
  ],
  //plugin是插件，设置把vuex里的数据存在本地存储中
});
